<template>
    <div class="safe-page">
        <!-- 安全强度 -->
        <div class="strength unified-cursor-default flex unified-flex-align unified-flex-space-around">
            <p>当前的帐号安全程度：</p>
            <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
            <p>

                安全级别：<span>低</span>
            </p>
        </div>

        <div class="box unified-cursor-default flex unified-flex-space-between">

            <div class="text-box flex  unified-flex-center">

                <p class="top">密保问题 <span class="status ">未设置</span></p>
                <p class="bottom">为了您的账户安全，请设置密保问题。</p>

            </div>
            <div class="option flex unified-flex-align unified-flex-center">
                <el-button type="primary">立即设置</el-button>
            </div>
        </div>

        <div class="box unified-cursor-default flex unified-flex-space-between">

            <div class="text-box flex  unified-flex-center">

                <p class="top">修改密码 <span class="status ">安全度：低</span></p>
                <p class="bottom">为了您的账户安全，请绑定邮箱。</p>

            </div>
            <div class="option flex unified-flex-align unified-flex-center">
                <el-button type="primary">立即修改</el-button>
            </div>
        </div>

        <div class="box unified-cursor-default flex unified-flex-space-between">
            <div class="text-box flex  unified-flex-center">
                <p class="top">支付密码 <span class="status ">未设置支付密码</span></p>
                <p class="bottom">为了您的账户安全，请绑定邮箱。</p>
            </div>
            <div class="option flex unified-flex-align unified-flex-center">
                <el-button type="primary">立即设置</el-button>
            </div>
        </div>
        
        
        <div class="box unified-cursor-default  flex unified-flex-space-between">
        
            <div class="text-box flex  unified-flex-center">
                <p class="top">冻结/解冻</p>
                <p class="bottom">永久删除您的个人账号,删除后无法登录。
                </p>
            </div>
            <div class="option flex unified-flex-align unified-flex-center">
                <el-button type="primary">解除冻结</el-button>
            </div>
        </div>

        <div class="box unified-cursor-default  flex unified-flex-space-between">

            <div class="text-box flex  unified-flex-center">
                <p class="top">账号注销</p>
                <p class="bottom">永久删除您的个人账号,删除后无法登录。
                </p>

            </div>
            <div class="option flex unified-flex-align unified-flex-center">
                <el-button type="danger">注销</el-button>
            </div>
        </div>
        
        






    </div>
</template>

<script>
</script>

<style scoped="scoped">
    .safe-page {
        padding-bottom: 30px;
    }


    .strength {
        width: 90%;
        margin: 0 auto;
        flex-direction: column;
        height: 240px;
        margin-top: 15px;
        padding-bottom: 10px;
    }

    .strength,
    .box {
        border-bottom: 1px solid #c3c3c344;
    }

    .box {
        width: 90%;
        margin: 0 auto;
        height: 90px;
    }


    .text-box {
        flex: 1;
        height: 100%;
        flex-direction: column;
        padding-left: 0px;
    }

    .option {
        width: 200px;
        height: 100%;
        justify-content: flex-end;
    }

    .top {
        font-size: 18px;
    }

    .bottom {
        font-size: 8px;
        color: #55555588;
        margin-top: 12px;
    }

    .status {
        margin-left: 10px;
        font-size: 8px;
        text-decoration: underline;
        color: #2269F3;
    }
</style>
